<template>
    <div>
        <el-container>
            <el-header>Header</el-header>
            <el-container >
                <el-aside width="200px"></el-aside>
                <el-main>
                    <goodItem v-for="item in itemList" :key="item.name"
                    :data="item"
                    >

                    </goodItem>
                    <div @click="toGet"> get传输</div>

                </el-main>
                <el-aside width="200px">AsideL</el-aside>
            </el-container>
            <el-footer>Footer</el-footer>
        </el-container>
    </div>
</template>

<script>
    import { ElMessage } from 'element-plus'
    import goodItem from '../components/goodItem'
    import {demo} from '../api/demo/index'
    export default {
        data(){
          return{
            itemList:[
                {
                    name:"1",
                    content:"1",
                },
                {
                    name:"2",
                    content:"2",
                },
                {
                    name:"3",
                    content:"4",
                },
            ]
          }
        },
        methods:{
            toGet(){
                demo().then((res)=>{
                    console.log(res);
                })
            },
            Choose(){
                ElMessage.success({
                    message: '恭喜你，这是一条成功消息',
                    type: 'success'
                });
                // this.$post(this.$url.Demo,{
                //     name:"aaaa",
                // }).then((res)=>{
                //     console.log(res);
                // })
            }
        },
        components:{
            goodItem,
        }
    }
</script>

<style lang="scss">
    .tempClick{
        width: 200px;
        height:100px;
        text-align: center;
        background: black;
        color:white;
        line-height: 100px;
    }
    .imgTemp{
        width: 100px;
        height:100px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;

    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        /*line-height: 160px;*/
        display: flex;
        flex-direction:column;
        justify-content:center;
        height:auto;
        align-items: center;
    }


</style>